<template>
    <div id="userWallet">
        <!-- <haders title="我的钱包"></haders> -->
		<div class="myWallet">
			<scroller ref="scroller" :on-infinite="infinite">
				<div class="mian">
					<div class="balance">
						<p>{{TotalMoney | money}}</p>
						<p>当前余额</p>
					</div>
					<!--<p class="but_p"><button>提现</button></p>-->
					<ul class="consumer">
						 <p class="sumer_p">明细</p>
						 <li class="sumerUser" v-for="item in items">
						 	<p><span>订单号:{{item.OrderNo}}</span><span>收入:￥{{item.TradeMoney}}</span></p>
						 	<p><span>{{item.TradeTime|tiems}}</span></p>
						 </li>
					</ul>
					<!--没有数据时-->
					<!--<no-data v-if="items==0" title="还没有你消费的数据~~~"></no-data>-->
	
				</div>
			</scroller>
		</div>
		
		
    </div>    
</template>
<script> 
	import { Toast } from 'mint-ui';
	import Qs from 'qs';
	import { Indicator } from 'mint-ui';
export default {
  name: 'userWallet',
  components:{

  },
  data() {
	return {
		indexPage: 1, //请求页面索引
		items: [],
		status:2,//交易类型
		bDate:'',//开始时间
		eDate:'',//结束时间
		done:'',
		TotalMoney:''//总金额 
		}
	 },
		mounted() {  
		},
		methods: {
			infinite(done){ 
				this.done=done;
				this.$http.get("/ManagerGroupBuy/GetManageTradeLogList", {
					params: {
						"status":this.status,
						"page":this.indexPage,
						"bDate":this.bDate,
						"eDate":this.eDate
					}
				}).then((res) => {
					console.log(res);
					this.TotalMoney=res.data.data.TotalMoney;
					if(res.data.data.List=="") {
						done(true);
					}else{ 
						if(this.indexPage <= res.data.data.TotalPage) {
							this.indexPage++;
							this.items = this.items.concat(res.data.data.List);
							setTimeout(function() {
								done()
							}, 3000)
						} else {
							done(true)
						}
					}
				}).catch((err) => {
					console.log(err)
				});
			}
		},
		filters: {
			tiems: function(val) {
				if(!val) {
					return ''
				} else {
					return val.replace(/(T|\.\d+)/gim, " ");
				}
			},
			money: function(val) {
				if(!val) {
					val = 0.00;
				} else {
					val = Number(val).toFixed(2);
				}
				return val
			}
		}
}
</script>
<style scoped>
.consumer{
		width: 100%;
	}
	.consumer .sumer_p{
		padding: 0.2rem 0.3rem;
		font-size: 0.4rem;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.consumer .sumerUser{
		padding: 0.2rem 0.3rem;
		background-color:#fff;
		font-size: 0.346666rem;
		border-bottom: 1px solid  #CCCCCC;
	}
	.sumerUser p{
		padding: 0.2rem 0;
		display: flex;
		justify-content: space-between;
	}
	.balance{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 4rem;
		background-color: #fff;
		border-bottom: 1px solid #CCCCCC;
	}
	.balance p{
		text-align: center;
	}
	.balance p:nth-child(1){
		color: #6530E0;
		font-size: 0.666666rem;
		font-weight: 700;
	}
	.balance p:nth-child(2){
		color: #333333;
		font-size: 0.346666rem;
	}
	.but_p{
		width: 100%;
		border-bottom:1px solid #CCCCCC;
		padding: 0.2rem 0.3rem;
		background-color: #fff;
	}
	.but_p button{
		width: 100%;
		border-radius:0.066666rem;
		color:#fff;
		height:0.8rem;
		background-color: #71B5F4;
	}
	.myWallet{
		/*width: 100%;
		position: relative;
		height: 5rem;
		overflow-y: auto;*/
	}
	
</style>
